<ion-header>
<ion-toolbar no-boarder-top>
    <ion-grid>
        <ion-row>
            <ion-col col-2>
                <ion-buttons start (click)="dismiss()">
                    <button ion-button clear>
                        <ion-icon name="arrow-back" color="danger"></ion-icon>
                    </button>
                </ion-buttons>
            </ion-col>
            <ion-col col-8>
                <ion-segment color="danger" mode="md" [(ngModel)]="segment">
                    <ion-segment-button value="comm">商品</ion-segment-button>
                    <ion-segment-button value="detail">详情</ion-segment-button>
                    <ion-segment-button value="comments">评价</ion-segment-button>
                </ion-segment>
            </ion-col>
            <ion-col col-1>
                <ion-buttons end>
                    <button ion-button clear (click)="goCart()">
                        <ion-icon name="ios-cart-outline" color="danger"></ion-icon>
                    </button>
                </ion-buttons>
            </ion-col>
            <ion-col col-1>
                <ion-buttons end>
                    <button ion-button clear (click)="presentPopOver($event)">
                        <ion-icon name="more" color="danger"></ion-icon>
                    </button>
                </ion-buttons>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-toolbar>
</ion-header>

<ion-content (swipe)="swipeEvent($event)">
    <div [ngSwitch]="segment">
    <div *ngSwitchCase="'comm'">
    <div>
    <ion-slides autoplay="2000" loop="ture">
        <ion-slide>
            <!--<img src="assets/image/slide0.jpg" class="slide-image" (click)="openCommDetail()"/>-->
            <img src="assets/image/详情5.jpg" class="slide-image"/>
            </ion-slide>
        <ion-slide>
            <img src="assets/image/详情6.jpg" class="slide-image"/>
        </ion-slide>
        <ion-slide>
            <img src="assets/image/详情7.jpg" class="slide-image"/>
        </ion-slide>
    </ion-slides>
    </div>
    <ion-card>
        <ion-grid>
            <ion-row>
                <ion-col col-9>
                    <p>物品描述在这</p>
                </ion-col>
                <ion-col col-3 text-align="right">
                    <button ion-button clear small>
                        <ion-icon name="ios-share-outline" color="danger"></ion-icon>
                        <p>&#160;分享</p>
                    </button>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-icon name="logo-yen" color="danger"></ion-icon>
                    <font color="#F53D3D" size="5">328</font>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <p>预售商品,2017年05月28日24点前发货</p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <p>快递：0.00</p>
                </ion-col>
                <ion-col>
                    <p>月销：729</p>
                </ion-col>
                <ion-col>
                    <p>浙江杭州</p>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-card>
    <ion-card>
        <div class="comm-detail-divbottomborder">
            <ion-grid>
                <ion-row>
                    <ion-col col-9>
                        <p>全天猫实物商品通用</p>
                        <p>领取优惠券</p>
                    </ion-col>
                    <ion-col col-3>
                        <button ion-button clear small color="danger">领取</button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
        <div>
            <ion-grid>
                <ion-row>
                    <ion-col col-9> 
                        <p>满2件，享部分地区包邮，送50元优惠券，不包邮地区..</p>
                        <p>购买可得164积分</p>
                    </ion-col>
                    <ion-col col-3>
                        <button ion-button clear small>
                            <ion-icon name="more" color="danger"></ion-icon>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </ion-card>
    <ion-card>
        <div class="comm-detail-divbottomborder">
            <ion-grid>
                <ion-row>
                    <ion-col>
            <!--<ion-icon name="thumbs-up"></ion-icon>&#160;-->
            <p><ion-icon name="thumbs-up" color="danger"></ion-icon>&#160;好品质</p>
            <p>线下门店有售</p>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
        <div>
            <ion-grid>
                <ion-row>
                    <ion-col>
                        <p>-正品保证</p>
                    </ion-col>
                    <ion-col>
                        <p>-极速退款</p>
                    </ion-col>
                    <ion-col>
                        <p>-七天退换</p>
                    </ion-col>
                    <ion-col>
                        <button ion-button clear small color="danger">
                            <ion-icon name="more" color="danger"></ion-icon>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </ion-card>
    <ion-card>
        <div class="comm-detail-divbottomborder">
            <ion-grid>
                <ion-row>
                    <ion-col col-9>
                        <p>产品参数</p>
                    </ion-col>
                    <ion-col col-3>
                        <button ion-button clear small>
                            <ion-icon name="more" color="danger"></ion-icon>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
        <div>
            <ion-grid>
                <ion-row>
                    <ion-col col-9>
                        <p>选择颜色分类，尺码</p>
                    </ion-col>
                    <ion-col col-3>
                        <button ion-button clear small>
                            <ion-icon name="more" color="danger"></ion-icon>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </ion-card>
    <ion-card>
        <ion-grid>
            <ion-row>
                <ion-col>
                    <p>商品评价（117）</p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <img src="assets/image/me-avatar.jpg" class="comm-detail-avatar"/>
                </ion-col>
                <ion-col>
                    <p>严博琛</p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <p>宝贝贼棒</p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    2017-05-17
                </ion-col>
                <ion-col>
                    颜色分类：001 黑色 尺码：M
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-buttons end>
                        <button ion-button clear small>
                            <font color="#F53D3D">查看全部评价</font>
                        </button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-card>
    <ion-card>
        <ion-grid>
            <ion-row>
                <ion-col>
                    <img src="assets/image/me-avatar.jpg" class="comm-detail-avatar"/>
                </ion-col>
                <ion-col>
                    <p>红袖官方旗舰店</p>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <div>906
                        <p>全部宝贝</p>
                    </div>
                </ion-col>
                <ion-col>
                    <div>52
                        <p>上新宝贝</p>
                    </div>
                </ion-col>
                <ion-col>
                    <div>103.6万
                        <p>关注人数</p>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <div>
                        <p>宝贝描述：4.8</p>
                        <p>卖家服务.8</p>
                        <p>宝贝描述：4.8</p>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-buttons start>
                        <button ion-button clear small color="#F53D3D">
                            <font color="#F53D3D">查看分类</font>
                        </button>
                    </ion-buttons>
                </ion-col>
                <ion-col>
                    <ion-buttons end>
                        <button ion-button clear small color="#F53D3D">
                            <font color="#F53D3D">进店逛逛</font>
                        </button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-card>
    <ion-card>
        <ion-grid>
            <ion-row>
                <ion-col col-9>
                    <p>自由搭配</p>
                </ion-col>
                <ion-col col-3>
                    <ion-buttons end>
                        <button ion-button clear small>
                            <ion-icon name="arrow-forward" color="danger"></ion-icon>
                        </button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <img src="assets/image/详情5.jpg" class="comm-detail-freestylepic"/>
                    <p>&yen;669</p>
                </ion-col>
                <ion-col>
                    <img src="assets/image/详情6.jpg" class="comm-detail-freestylepic"/>
                    <p>&yen;599</p>
                </ion-col>
                <ion-col>
                    <img src="assets/image/详情7.jpg" class="comm-detail-freestylepic"/>
                    <p>&yen;639</p>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-card>
    <div>
        <p class="comm-detail-addsign">继续拖动，查看图文详情</p>
    </div>
    </div>
    
        <div *ngSwitchCase="'detail'">
            <ion-grid>
                <ion-row>
                    <ion-col>
                        <img src="assets/image/详情0.jpg"/>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <div>
                <ion-grid>
                    <ion-row>
                        <ion-col col-5>
                            <div class="comm-detail-box">
                                <font size="3">新品专区满500用券减50<Br/></font>
                                <font size="1">活动时间：5/25日-5/30日</font>
                            </div>
                            <div>
                                <ion-grid>
                                    <ion-row>
                                        <ion-col col-5 class="comm-detail-toright">
                                            <font size="2">&yen;</font>
                                            <font size="5">50</font>
                                        </ion-col>
                                        <ion-col col-7>
                                            <font size="2">满500享用<Br/></font>
                                            <font size="2" class="comm-detail-sometext">立即领用</font>
                                        </ion-col>
                                    </ion-row>
                                </ion-grid>
                            </div>
                        </ion-col>
                        <ion-col col-7>
                            <img src="assets/image/详情1.jpg"/>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
            <div>
                <ion-grid>
                    <ion-row>
                        <ion-col>
                            <img src="assets/image/详情2.jpg"/>
                        </ion-col>
                        <ion-col>
                            <img src="assets/image/详情3.jpg"/>
                        </ion-col>
                        <ion-col>
                            <img src="assets/image/详情4.jpg"/>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
            <div>
                <ion-grid>
                    <ion-row>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情5.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情6.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情7.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情8.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情9.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情10.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情11.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情12.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                        <ion-col class="comm-detail-tocenter">
                            <img src="assets/image/详情13.jpg"/>
                            <font size="1">一字领印花雪纺连体短裤<Br/></font>
                            <ion-buttons>
                                <button ion-button small color="danger" [outline]="true">
                                    <font size="2">&yen;599</font>
                                </button>
                            </ion-buttons>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
            <img src="assets/image/详情14.jpg"/>
        </div>

        <div *ngSwitchCase="'comments'">
            <ion-grid class="comm-detail-grid-nopadding">
                <ion-row>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">全部</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">有图（12）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">穿着漂亮（27）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">版型很好（13）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">质量好（12）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons" >
                                <font size="2">很舒适（11）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">料子不错（8）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                    <ion-col class="comm-detail-grid-nopadding">
                        <ion-buttons>
                            <button ion-button small full class="comm-detail-comments-buttons">
                                <font size="2">配饰很好（6）</font>
                            </button>
                        </ion-buttons>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <div class="comm-detail-divbottomborder">
                <ion-card>
                    <ion-grid>
                        <ion-row>
                            <ion-col>
                                <font size="2">y***1</font>
                                <div class="comm-detail-toright">
                                    <font size="1">2017.05.22</font>
                                </div>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="2">不好看不好看</font>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="1">颜色分类：S59黑色；尺寸：165/85A/MR</font>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card>
                <ion-card>
                    <ion-grid>
                        <ion-row>
                            <ion-col>
                                <font size="2">y***2</font>
                                <div class="comm-detail-toright">
                                    <font size="1">2017.05.23</font>
                                </div>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="2">好看好看</font>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="1">颜色分类：S59黑色；尺寸：165/85A/MR</font>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card>
                <ion-card>
                    <ion-grid>
                        <ion-row>
                            <ion-col>
                                <font size="2">y***3</font>
                                <div class="comm-detail-toright">
                                    <font size="1">2017.05.24</font>
                                </div>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="2">不好看不好看</font>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="1">颜色分类：S59黑色；尺寸：165/85A/MR</font>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card>
                <ion-card>
                    <ion-grid>
                        <ion-row>
                            <ion-col>
                                <font size="2">y***4</font>
                                <div class="comm-detail-toright">
                                    <font size="1">2017.05.25</font>
                                </div>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="2">好看好看</font>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col>
                                <font size="1">颜色分类：S59黑色；尺寸：165/85A/MR</font>
                            </ion-col>
                        </ion-row>
                    </ion-grid>
                </ion-card>
            </div>
        </div>
    </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid class="comm-detail-grid-nopadding">
        <ion-row>
            <ion-col col-2>
                <div class="comm-detail-footerbutton">
                    <ion-icon size ="2" name="chatbubbles"></ion-icon>
                    <font size="2"><Br/>客服</font>
                </div>
            </ion-col>
            <ion-col col-2>
                <div class="comm-detail-footerbutton">
                    <ion-icon size ="2" name="apps"></ion-icon>
                    <font size="2"><Br/>店铺</font>
                </div>
            </ion-col>
            <ion-col col-2>
                <div class="comm-detail-footerbutton">
                    <ion-icon size ="2" name="ios-star-outline"></ion-icon>
                    <font size="2"><Br/>收藏</font>
                </div>
            </ion-col>
            <ion-col col-3 style="background-color:orange" (click)="goCart()">
                <div style='text-align:center;margin-top:6px;color:white'>
                    加入购物车
                </div>
            </ion-col>
            <ion-col col-3 style="background-color:#f53d3d">
                <div style='text-align:center;margin-top:6px;color:white'>
                    立即购买
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>

  </ion-toolbar>
</ion-footer>